<template>
    <div class="orders_wrap">
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>订单管理</el-breadcrumb-item>
            <el-breadcrumb-item>订单列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片区域 -->
        <el-card>
            <!-- 搜索区域 -->
            <el-input placeholder="请输入内容" v-model="searchText" class="input-with-select">
                <el-button @click="submitSearch" slot="append" icon="el-icon-search"></el-button>
            </el-input>

            <!-- 数据展示区 -->
             <el-table :data="ordersList" border style="width: 100%">
                <el-table-column prop="order_number" label="订单编号"></el-table-column>
                <el-table-column prop="order_price" label="订单价格"></el-table-column>
                <el-table-column prop="pay_status" label="是否付款"></el-table-column>
                <el-table-column label="下单时间">
                    <template slot-scope="scope">
                        {{scope.row.create_time | setTimer}}
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="getOrdersParams.pagenum"
        :page-sizes="[5, 10, 15, 20]" :page-size="getOrdersParams.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>

    </div>
</template>

<script>
export default {
    data() {
        return {
            // 存储订单列表
            ordersList: [],
            // 获取订单列表参数
            getOrdersParams: {
                query: '',
                pagenum: 1,
                pagesize: 5,
            },
            // 订单总数
            total: 0,
            // 搜索文本
            searchText: ''
        }
    },
    created() {
        this.getOrdersList();
    },
    methods: {
        // 获取订单列表
        async getOrdersList() {
            const { data: res } = await this.$http.get('orders', { params: this.getOrdersParams });
            this.ordersList = res.data.goods;
            this.total = res.data.total;
            console.log(res);
        },
        // 获取最新显示的条数
        handleSizeChange(newSize) {
            this.getOrdersParams.pagesize = newSize;
            this.getOrdersList();
        },
        // 获取最新的当前页码
        handleCurrentChange(newNum) {
            this.getOrdersParams.pagenum = newNum;
            this.getOrdersList();
        },
        // 提交搜索内容
        submitSearch() {
            console.log(1);
            this.getOrdersParams.query = this.searchText;
            this.getOrdersList();
        }

    }
}
</script>

<style lang="less" scoped>

</style>